.transition-1{
  position: fixed;
  top:0;
  bottom:0;
  width:100%;
  right:-100%;
  z-index: 20;
background-image: url(https://images.unsplash.com/photo-1534796636912-3b95b3ab5986?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80);
object-fit: cover;

  pointer-events: none;
  transition: 0.5s ease-in-out;

}


.transition-1.is-active{
  /* opacity: 1; */
  right:0;
  /* pointer-events: all; */
}
.transition-2{
  position: fixed;
  top:0;
  left:-100%;
  bottom:0;
width:100%;
  z-index: 20;

background-image:url(https://images.unsplash.com/photo-1534796636912-3b95b3ab5986?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80);

  transition: 0.5s ease-in-out;

}

.transition-2.is-active{

  left:0;
}
.transition-3{
  position: fixed;
  top:100%;
  right:0;
  bottom:0;
width:100%;
  z-index: 20;

background-image:url(https://images.unsplash.com/photo-1534796636912-3b95b3ab5986?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80);
  transition: 0.5s ease-in-out;

}

.transition-3.is-active{

  top:0;
}
.transition{
  display: flex;
  align-items: center;
  justify-content: center;

}
.pre{

  position: relative;

  margin: auto;
  width:50px;
  height: 50px;
  color:white;
  opacity: .8;
  transition:none;
}
.categories,.categories ul{
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap:0 20px;
  list-style-type: none;
  font-family: 'nasalization', sans-serif;
  
}
.categories {
margin:20px auto;
cursor: pointer;
}
.category{
  transition: .3s ease ;
}
.category:hover{
  color:#FFC23C;
}
.category.active{
  color:#FFC23C;
  transform: scale(1.2);
}